<template>
  <div class="gamehome-container">
    <p @click="changeTheme('theme1')">1</p>
    <p @click="changeTheme('theme2')">2</p>
    <p @click="changeTheme('theme3')">3</p>
    <div class="gametitle-container">
      <h3 class="gametitle">
        {{ money }}
      </h3>
      <h3 class="gametitle">
        {{ moneyDe }}
      </h3>
      <h3 class="gametitle">
        {{ index }}
      </h3>
      <h3 class="gametitle">
        {{ size }}
      </h3>
    </div>
  </div>
</template>

<script>
// https://blog.csdn.net/songxiugongwang/article/details/88071061
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { fetchPopulace, fetchRealCompany } from "@/module/game/api/base";
import $ from "@/utils/operationDOM";
import { Decimal } from "@/utils/decimal.min.js";
export default {
  name: "Home",
  data() {
    return {
      money: 0,
      moneyDe: 0
    };
  },
  computed: {
    //...mapGetters(["index"]),
    // ...mapState('pim', {
    //         count: state => state.count
    //     }),
    ...mapState("app", ["index", "size"])
  },
  watch: {},
  created() {},
  mounted() {
    this.FetchIndex(4);
    // this.$store.commit("app/setIndex", 4)
    console.log($(".gamehome-container").height());
    this.money = 100.1 + 9.8;
    this.moneyDe = new Decimal(100.1).add(9.8);
    console.log(this.money, this.moneyDe);
    Promise.all([fetchPopulace(), fetchRealCompany()]).then(function(values) {
      console.log(values[0].data.data, values[1].data.data);
    });
  },
  destroyed() {},
  methods: {
    // ...mapMutations('app',['setIndex']),
    ...mapMutations("app", {
      FetchIndex: "setIndex"
    }),
    changeTheme(theme) {
      window.document.documentElement.setAttribute("data-theme", theme);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
p {
  @include color_primary($background-color-theme);
}
.gamehome-container {
  padding: 20px;
}
</style>
